<template>
  <div class="payBook">
    <Header></Header>
    <div style="height: 88px;"></div>

    <div class="listBox">
      <div class="btn" @click="handleDown">
        {{ $t('assemble.导出订单列表') }}
      </div>
      <div id="excel">

        <el-table :data="tableData" id="out-table" :border="true">
          <el-table-column property="number" width="170"></el-table-column>
          <el-table-column property="date" width="100"></el-table-column>
          <el-table-column property="name" width="150"></el-table-column>
          <el-table-column property="category" width="100"></el-table-column>
          <el-table-column property="brand" width="130"></el-table-column>
          <el-table-column property="pro" width="150"></el-table-column>
          <el-table-column property="num" width="100"></el-table-column>
          <el-table-column property="price" width="100"></el-table-column>
          <el-table-column property="total" width="100"></el-table-column>
          <el-table-column property="stateName" width="80"></el-table-column>
        </el-table>



      </div>





    </div>
    <div style="height: 184px;"></div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '@/components/header/index.vue'
import Footer from '@/components/footer/index.vue';
import htmlToPdf from '../../utils/htmltopdf';
import { getOrderlist, } from '@/utils/api'

export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      pageInfo: {
        page: 1,
        limit: 10,
        total: 0,
      },
      tableData: []

    }
  },
  mounted() {
    this.getOrderDatalist()
  },
  methods: {
    async getOrderDatalist() {
      let res = await getOrderlist({
        page: this.pageInfo.page,
        limit: this.pageInfo.limit
      })
      if (res.code == 1) {
        console.log("订单列表", res)
        this.tableData = res.data.list
        this.tableData.forEach((item, index) => {
          this.tableData[index].date = this.timestampToTime(item.createtime)
          if (item.state == -1) {
            item.stateName = this.$t('assemble.未通过审批')
          }
          if (item.state == 0) {
            item.stateName = this.$t('assemble.待审批')
          }
          if (item.state == 1) {
            item.stateName = this.$t('assemble.审核通过')
          }
          if (item.state == 2) {
            item.stateName = this.$t('assemble.生产中')
          }
          if (item.state == 3) {
            item.stateName = this.$t('assemble.发货')
          }
          if (item.state == 4) {
            item.stateName = this.$t('assemble.完成')
          }
        })

        this.tableData.unshift({
          number: this.$t('assemble.订单编号'),
          date: this.$t('assemble.下单日期'),
          name: this.$t('assemble.商品名称'),
          category: this.$t('assemble.产品类别'),
          brand: this.$t('assemble.授权品牌'),
          pro: this.$t('assemble.授权品牌子类别'),
          num: this.$t('assemble.数量'),
          price: this.$t('assemble.单价'),
          total: this.$t('assemble.总价'),
          stateName: this.$t('assemble.订单状态')
        })
      }
    },

    handleDown() {
      htmlToPdf.downloadPDF(document.querySelector('#excel'), '订单列表');
    },

    timestampToTime(timestamp) {
      // 时间戳为10位需*1000，时间戳为13位不需乘1000
      var date = new Date(timestamp * 1000);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      return Y + M + D;
    },

  }
}
</script>

<style scoped lang="scss">
.payBook {


  .listBox {
    width: 1200px;
    margin: 20px auto;

    .btn {
      height: 40px;
      display: inline-block;
      border-radius: 10px 10px 10px 10px;
      background-color: #FF2424;
      font-size: 18px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 40px;
      text-align: center;
      margin-left: 40px;
      cursor: pointer;
      padding: 0 20px;
      float: right;
    }


    .tableHeader {
      display: flex;
      clear: both;

      p {
        &:nth-of-type(1) {
          width: 300px;
          text-align: center;
        }

        &:nth-of-type(2) {
          width: 300px;
          text-align: center;
        }

        &:nth-of-type(3) {
          width: 200px;
          text-align: center;
        }

        &:nth-of-type(4) {
          width: 150px;
          text-align: center;
        }

        &:nth-of-type(5) {
          width: 150px;
          text-align: center;
        }

        &:nth-of-type(6) {
          width: 150px;
          text-align: center;
        }

        &:nth-of-type(7) {
          width: 150px;
          text-align: center;
        }

        &:nth-of-type(8) {
          width: 150px;
          text-align: center;
        }

        &:nth-of-type(9) {
          width: 150px;
          text-align: center;
        }
      }
    }

    .tableBody {
      .tableitem {
        display: flex;
      }
    }
  }
}
</style>